import React from 'react';
import { connect } from 'react-redux';
import { Carousel } from 'antd';
import '../assets/css/index.css'
const App = (props) => {
  const imgHandle = (item) => item.split(',').shift()
  return (
    <>
      <Carousel style={{'height':'490px'}} infinite={false} draggable={true} >
        {
          props.banner.map(item=>{
            return <div key={item.id} style={{'height':'490px'}}>
              <img src={item.banner_url} style={{'height':'490px','width':'100%'}}/>
            </div>
          })
        }
      </Carousel>
      {
        props.hot_goods.map(item=>{
          return<div className="hot flex column a-center" key={item.id}>
                  <div className="hot-title"> {`<<`} 爆款推荐 {`>>`} </div>
                  <div className="hot-sub-title">— — POPULAR MONEY — —</div>
                  <div className="hot-good">
                    <img src={item.goods_img} />
                    <div className="hot-good-content">
                      <div className="hot-good-title" title={item.goods_name}>
                        { item.goods_name }
                      </div>
                      <div className="hot-good-bottom-content">
                        <div className="hot-good-bottom">
                          <div>
                            <div style={{'fontSize': '22px'}}>钜惠</div>
                            <div style={{'fontSize': '30px'}}>商品价</div>
                          </div>
                          <div style={{'fontSize': '72px'}}>
                            <span style={{'fontSize': '48px'}}>￥</span>{ item.price }
                          </div>
                        </div>
                        <div className="buy-button fright">立即抢购{`>`}</div>
                      </div>
                    </div>
                  </div>
                </div>
          })
      }
      {
        props.selected_goods.map((item,index)=>{
          if(index===0){
            return <div className="hot flex column a-center" key={item.id}>
                <div className="hot-title">{`<<`} 新品推荐 {`>>`}</div>
                <div className="hot-sub-title">— — POPULAR MONEY — —</div>
                <div className="hot-good">
                  <img src={item.goods_img}  />
                  <div className="hot-good-content">
                    <div className="hot-good-title" title="item.goods_name">
                      { item.goods_name }
                    </div>
                    <div className="hot-good-bottom-content">
                      <div className="hot-good-bottom">
                        <div>
                          <div style={{"fontSize": "22px"}}>钜惠</div>
                          <div style={{"fontSize": "30px"}}>商品价</div>
                        </div>
                        <div style={{"fontSize": "72px"}}>
                          <span style={{"fontSize": "48px"}}>￥</span>{ item.price }
                        </div>
                      </div>
                      <div className="buy-button" >立即抢购{`>`}</div>
                    </div>
                  </div>
                </div>
              </div>
          }
        })
      }
      <div className="popular-container">
        {
           props.selected_goods.map((item,index)=>{
            if(index>0){
              return <div className="popular-item" key={item.id}>
                <img src={imgHandle(item.goods_img)}/>
                <div className="goods_name" title={item.goods_name}>
                  { item.goods_name }
                </div>
                <div className="hot-good-bottom">
                <div>
                            <div style={{"fontSize": "22px"}}>钜惠</div>
                            <div style={{"fontSize": "30px"}}>商品价</div>
                          </div>
                          <div style={{"fontSize": "72px"}}>
                            <span style={{"fontSize": "48px"}}>￥</span>{ item.price }
                          </div>
                </div>
                <div className="buy-button" >立即抢购{`>`}</div>
              </div>
            }
           })
        }
      </div>
      <div className="backtop" onClick={() => { window.scrollTo({top: 0,behavior: 'smooth'}) }}>
        <img src={require('../assets/img/top.png')} />
        <div className="flex column j-center">
          <div style={{"fontSize": "27px"}}>返回顶部查看</div>
          <div style={{"fontSize": "12px"}}>RETURN TO TOP VIEW</div>
        </div>
    </div>
    </>
    
  );
};
export default connect(
  state=>state.webInfo,
  {}
)(App);